<!--
* @FileDescription: 故障分析页面
* @Author: yuec621@outlook.com
* @Date: 2024-11-16 12:42:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-15 10:01:53
-->
<template>
    <div class="pagestyle">
        <noDataChartCom v-if="state.nodataShow" @toolChange="toolChange" :searListData="state.searList"
            :tabList="state.configTabList" :lineConParams="state.lineConParams" :attrObj="state.attrObj"></noDataChartCom>
        <div v-else>
            <div class="cardBox" :style="{backgroundColor:state.attrObj&&state.attrObj.chartBg?state.attrObj.chartBg:'#fff'}">
                <toolCom @toolChange="toolChange" :lineConParams="state.lineConParams" :searList="state.searList"
                    :tabList="state.configTabList" :totaltoolList="state.totaltoolList" :chartType="1"
                    :timeRange="state.timeRangevalue" :lengedList="state.lengedList" :lengedListShow="true"
                    :acSearchList="state.acSearchList" :attrObj="state.attrObj">
                    <template v-slot:toolComTitle>
                        故障分析配置
                    </template>
                </toolCom>
                <div v-loading="state.loading">
                    <failAyasChartCom :chartList="state.chartList" :toolType="state.toolType" @toolChange="toolChange" :attrObj="state.attrObj">
                    </failAyasChartCom>
                </div>
            </div>
            <div class="cardBox">
                <chartTable :curdShow="true" :tabledata="state.tableData" :tableheadsValue="state.options.tableheads">
                    <template v-slot:tabBoxList="row">
                        <span class="hover" style="background-color:
                     transparent;text-align: left">列表</span>
                    </template>
                    <template v-slot:opraCurdBtn="row">
                        <el-button type="text" @click="lookLineClick(row.row)">查看详情</el-button>
                    </template>
                </chartTable>
            </div>
            <!-- 详情 -->
            <el-drawer v-model="state.drawerShow" direction="rtl" size="50%" close-on-click-modal :modal="true">
                <template #header="{ close, titleId, titleClass }">
                    <h4 class="mask_sub_title">
                        <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>设备信息</span></h4>
                </template>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <detailCom :descList="state.descList"></detailCom>
                        <chartTable style="margin-top: 20px;" :curdShow="false" :tabledata="state.tableDataTwo"
                            :tableheadsValue="state.optionsTwo.tableheads" :key="state.tableDataTwo">
                        </chartTable>
                    </el-col>
                </el-row>
            </el-drawer>
        </div>
    </div>
</template>
<script setup>
    import toolCom from "./chartCom/toolCom.vue";
    import failAyasChartCom from "./chartCom/failAyasChartCom.vue";
    import chartTable from "./chartCom/chartTable.vue";
    import {
        computed,
        onMounted,
        reactive
    } from "vue";
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import
    detailCom
    from '@/components/commonCom/detailCom';
    import noDataChartCom from "./chartCom/noDataChartCom.vue";
    import axios from "@/utils/request"
    import usePagesStore from '@/store/modules/pages'
    import dayjs from 'dayjs'
    const {
        proxy
    } = getCurrentInstance();
    const store = usePagesStore()
    const router = useRouter();
    let previewHttps =
        import.meta.env.VITE_APP_HTTP
    let state = reactive({
        loading:false,
        nodataShow: true,
        descList: [],
        tabList: [{
            type: 1,
            name: '列表'
        }],
        drawerShow: false,
        totaltoolList: [{
            name: '今',
            icon: 'jintian',
            type: 0,
            selname: '取消今日',
            show: true
        }, {
            name: '前一天',
            icon: 'qianyitian',
            type: 1,
            selname: '取消前一天',
            show: true
        }, {
            name: '后一天',
            icon: 'houyitian',
            type: 2,
            selname: '取消后一天',
            show: true
        }, {
            name: '事件日历',
            icon: 'rilishijian',
            type: 3,
            selname: '取消事件日历',
            show: true,
            disabled: true
        }, {
            name: '显示圆点',
            icon: 'yuandian',
            type: 4,
            selname: '取消显示圆点',
            show: true,
            disabled: true
        }, {
            name: '标尺',
            icon: 'biaochi',
            type: 5,
            selname: '取消标尺',
            show: true,
            disabled: true
        }, {
            name: '游标',
            icon: 'youbiao',
            type: 6,
            selname: '取消游标',
            show: true,
            disabled: true
        }, {
            name: '框选',
            icon: 'kuangxuan',
            type: 7,
            selname: '取消框选',
            show: true,
            disabled: true
        }, {
            name: '纵向放大',
            icon: 'zongxiangfangda',
            type: 10,
            selname: '取消纵向放大',
            show: true,
            disabled: true
        }],
        type: 1,
        tableData: [],
        options: {
            tableheads: computed(() => table_headers.curlFaultPoint),
            dataUrl: '/hisPointFault/curlFaultPoints'
        },
        optionsTwo: {
            tableheads: computed(() => table_headers.curlFaultPointDetail),
            dataUrl: '/pointData/hisSwitchOpenTableDetail'
        },
        tableDataTwo: [],
        lineConParams: {
            type: 'A',
            pointUrl: "/simulate/history/attainPoints", //获取测点列表
            addTemSave: '/simulate/template/add', //新增模板接口
            tempList: '/simulate/template/list', //模板列表接口
            delTemp: '/simulate/template/del', //删除模板接口
            hisSearchSave: '/simulate/history/add', //新增历史查询接口
            hisSearchList: '/simulate/history/list', //查询历史查询接口
            hisSearchDel: '/simulate/history/del', //删除历史查询接口
        },
        configTabList: [{
            type: 1,
            name: '测点选择'
        }, {
            type: 2,
            name: '曲线属性'
        }],
        pointIdList: [],
        searList: [{
                label: "时间范围",
                id: "time",
                descList: [{
                    label: "时间范围",
                    type: "timeRangepage",
                    col: 24,
                    bindData: undefined,
                    field: "timeRange"
                }],
            },
            {
                label: "测点信息",
                id: "pointLocal",
                descList: [{
                        label: "传感器类型",
                        type: "radio",
                        col: 24,
                        bindData: 'A',
                        iSdefault: true,
                        field: "type",
                        judcond: 'deviceType', //判断条件
                        options: [{
                                label: "模拟量",
                                value: 'A',
                            },
                            {
                                label: "开关量",
                                value: 'D',
                            },
                            {
                                label: "累积量",
                                value: 'S',
                            }
                        ],
                    },
                    {
                        label: "传感器名称",
                        type: "select",
                        col: 24,
                        bindData: undefined,
                        options: [],
                        judcond: 'sensorchoiceName', //判断条件
                        field: 'choiceName',
                        fieldT: 'sensorName'
                    }
                ],
            },
            {
                label: "地点区域",
                id: "area",
                descList: [{
                        label: "所在区域",
                        type: "cascadercheckStrictly",
                        col: 24,
                        bindData: undefined,
                        options: [],
                        field: 'areaId',
                        fieldT: 'areaName',
                        judcond: 'areaName', //判断条件
                        props: {
                            children: "childList",
                            value: "id",
                            label: "areaName",
                            checkStrictly: true,
                            emitPath: false,
                        },
                    },
                    {
                        label: "安装地点",
                        type: "select",
                        col: 24,
                        bindData: undefined,
                        options: [],
                        field: "placeName",
                        judcond: 'placeName', //判断条件
                    },
                ],
            },
        ],
        totaltoolList: [{
            name: '今',
            icon: 'jintian',
            type: 0,
            selname: '取消今日',
            show: true
        }, {
            name: '前一天',
            icon: 'qianyitian',
            type: 1,
            selname: '取消前一天',
            show: true
        }, {
            name: '后一天',
            icon: 'houyitian',
            type: 2,
            selname: '取消后一天',
            show: true
        }, {
            name: '事件日历',
            icon: 'rilishijian',
            type: 3,
            selname: '取消事件日历',
            show: true,
            disabled: true
        }, {
            name: '显示圆点',
            icon: 'yuandian',
            type: 4,
            selname: '取消显示圆点',
            show: true,
            disabled: true
        }, {
            name: '标尺',
            icon: 'biaochi',
            type: 5,
            selname: '取消标尺',
            show: true,
            disabled: true
        }, {
            name: '游标',
            icon: 'youbiao',
            type: 6,
            selname: '取消游标',
            show: true,
            disabled: true
        }, {
            name: '框选',
            icon: 'kuangxuan',
            type: 7,
            selname: '取消框选',
            show: true,
            disabled: true
        }, {
            name: '纵向放大',
            icon: 'zongxiangfangda',
            type: 10,
            selname: '取消纵向放大',
            show: true,
            disabled: true
        }],
        attrList: [],
        attrObj: undefined,
        lengedList: [],
        timeRangevalue: [],
        symbolShow: false,
        toolType: null,
        splitNumber: 10,
        acSearchList:[],//默认页面筛选条件选择
    })

    // 获取曲线图数据
    function getList(startTime, endTime) {
        state.loading=true
        axios.post('/hisPointFault/curlFaultPoints', {
            pointList: state.pointIdList,
            faultStartTime: startTime,
            faultEndTime: endTime
        }).then(res => {
            state.loading=false
            state.chartList = res.data
        })
    }

    function getTableList(startTime, endTime) {
        axios.post('/hisPointFault/curlFaultPoints', {
            pointList: state.pointIdList,
            faultStartTime: startTime,
            faultEndTime: endTime
        }).then(res => {
            state.tableData = res.data
        })
    }
    // 头部操作工具栏事件
    async function toolChange(val) {
        if (val.type == 'dateType') {
            if (val.data && val.data.length > 0) {
                let startTime = dayjs(val.data[0]).format('YYYY-MM-DD HH:mm:ss')
                let endTime = dayjs(val.data[1]).format('YYYY-MM-DD HH:mm:ss')
                state.timeRangevalue = [startTime, endTime]
                state.searList[0].descList[0].bindData = [startTime, endTime]
                if (state.pointIdList.length > 0) {
                    localStorage.setItem('failanalysChart', JSON.stringify({
                        pointIds: state.pointIdList,
                        startTime: startTime,
                        endTime: endTime,
                        lengedList: state.lengedList,
                        attrObj:state.attrObj
                    }))
                    await getList(startTime, endTime)
                    await getTableList(startTime, endTime)
                } else {
                    proxy.$modal.msgWarning('请选择所要查询的测点编号!');
                }
            } else {
                proxy.$modal.msgWarning('请选择所要查询时间范围!');
            }
        } else if (val.type == '12') {
            state.toolType = val.type
        } else if (val.type == 'legend') {
            let arr = []
            state.attrObj = val.attrObj
            state.attrList = val.data
            state.lengedList = val.data
            state.pointIdList = val.data.map(item => {
                if (item.curlSwitchNodes) {
                    arr.push(...item.curlSwitchNodes)
                } else {

                }
                return item.pointId
            })
        } else if (val.type == 'legendshow') {
            state.lengedList = val.data
            state.attrObj = val.attrObj
            state.attrList = val.data
            state.acSearchList=val.acSearchList
            state.pointIdList = val.data.map(item => {
                return item.pointId
            })
            state.nodataShow = false
            state.toolType = -1
        } else if (val.type == '13') {
            state.toolType = val.type
        }
    }

    // 查看曲线按钮
    function lookLineClick(row) {
        state.descList = [{
            name: '编号',
            value: row.pointId,
            col: 4,
        }, {
            name: '名称',
            value: row.sensorName,
            col: 4,
        }, {
            name: '安装地点',
            value: row.placeName,
            col: 16,
        }]
        state.tableDataTwo = row.children
        state.drawerShow = true
    }
    onMounted(() => {
        // localStorage.removeItem('failanalysChart')
        let hisChartStore = JSON.parse(localStorage.getItem('failanalysChart'))
        if (hisChartStore != null) {
            state.nodataShow = false
            state.pointIdList = hisChartStore.lengedList.map(item => {
                return item.pointId
            })
            state.lengedList = hisChartStore.lengedList
            if (hisChartStore.attrObj) {
                state.attrObj = hisChartStore.attrObj
            }
            state.timeRangevalue = [hisChartStore.startTime, hisChartStore.endTime]
            getList(hisChartStore.startTime, hisChartStore.endTime)
            getTableList(hisChartStore.startTime, hisChartStore.endTime)
        } else {
            state.nodataShow = true
        }
    })
</script>
<style lang="scss" scoped>
    .pagestyle {
        overflow-y: auto;

        .cardBox {
            padding: 10px;
            margin: 10px;
            border-radius: 8px;
            margin-top: 10px;
            background-color: rgba($color: #ffffff, $alpha: .6)
        }
    }
</style>